<template>
  <div>
    <el-form v-if="column" size="small" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="column.type === 'component' ? 12: 24 ">
          <el-card shadow="never">
            <el-form-item label="列的类型">
              <el-select 
              v-model="column.type" 
              placeholder="列类型" 
              clearable 
              :style="{width: '100%'}" 
              @change="handleColumnType">
                <el-option v-for="(value, key) in tabColumnTypeList" :key="key" :value="key" :label="value" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择字段">
              <el-select
                v-model="column.prop"
                placeholder="请选择字段名"
                :style="{width: '100%'}"
                clearable
                @change="columnChange">
                  <el-option v-for="item in columns" :key="item.columnId" :label="item.columnName +'：' +item.columnComment" :value="item.columnName" />
              </el-select>
            </el-form-item>
            <el-form-item label="输入字段">
              <el-input v-model="column.prop" placeholder="输入字段" />
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="column.label" :min="0" placeholder="标题" />
            </el-form-item>
            <el-form-item label="默认值">
              <el-input
                v-model="column.defaultValue"
                placeholder="请输入默认值"
              />
            </el-form-item>
            <el-form-item label="列宽度">
              <el-input v-model="column.width" :min="0" placeholder="宽度（px）" />
            </el-form-item>
            <el-form-item label="列最小宽度">
              <el-input v-model="column.minWidth" :min="0" placeholder="最小宽度（px）" />
            </el-form-item>
            <el-form-item label="是否显示">
              <el-switch v-model="column.visible" />
            </el-form-item>
            <el-form-item label="是否合计">
              <el-switch v-model="column.showSummary" />
            </el-form-item>
            <el-form-item label="显示省略号">
              <el-switch v-model="column.showOverflowTooltip" />&nbsp;<span style="color: #F56C6C;">*单元格文字过长时显示省略号</span>
            </el-form-item>
            <el-form-item label="列固定">
              <el-radio-group v-model="column.fixed">
                <el-radio-button label>默认</el-radio-button>
                <el-radio-button label="left">左侧</el-radio-button>
                <el-radio-button label="right">右侧</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否排序">
              <el-switch v-model="column.sortable" />
            </el-form-item>
            <el-form-item label="拖动改变宽度">
              <el-switch v-model="column.resizable" />
            </el-form-item>
            <el-form-item label="对齐方式">
              <el-radio-group v-model="column.align">
                <el-radio-button label="left">左</el-radio-button>
                <el-radio-button label="center">中</el-radio-button>
                <el-radio-button label="right">右</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题对齐方式">
              <el-radio-group v-model="column.headerAlign">
                <el-radio-button label="left">左</el-radio-button>
                <el-radio-button label="center">中</el-radio-button>
                <el-radio-button label="right">右</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col v-if="column.type === 'component'" :span="12">
          <el-card shadow="never" style="height: 652.5px; overflow: auto;">
            <el-form-item label="组件类型">
              <el-select v-model="column.tag" placeholder="组件类型" clearable :style="{width: '100%'}"
              @change="handleColumnTagChange">
                <el-option key="el-input" label="单行输入框" value="el-input" />
                <el-option key="el-input-number" label="计数器" value="el-input-number" />
                <el-option key="el-select" label="下拉选择" value="el-select" />
                <el-option key="el-date-picker" label="日期选择" value="el-date-picker" />
                <el-option key="dept-select" label="部门下拉树" value="dept-select" />
                <el-option key="dept-position-s" label="部门岗位" value="dept-position-s" />
                <el-option key="dept-user-s" label="部门人员" value="dept-user-s" />
              </el-select>
            </el-form-item>
            <template v-if="column.tag">
              <el-form-item v-if="['el-select'].indexOf(column.tag) >= 0" label="名称字段">
                <el-input
                v-model="column.component.vName1" 
                placeholder="请输入名称字段" />
              </el-form-item>
              <el-form-item v-if="['dept-position-s', 'dept-user-s'].indexOf(column.tag) >= 0" label="部门id字段">
                <el-input
                v-model="column.component.vModel1" 
                placeholder="请输入部门id字段" />
              </el-form-item>
              <el-form-item v-if="['dept-select', 'dept-position-s', 'dept-user-s'].indexOf(column.tag) >= 0" label="部门名称字段">
                <el-input
                v-model="column.component.vName1" 
                placeholder="请输入部门名称字段" />
              </el-form-item>
              <template v-if="['dept-position-s', 'dept-user-s'].indexOf(column.tag) >= 0">
                <el-form-item :label="column.tag === 'dept-position-s' ? '岗位id字段' : '人员id字段'">
                  <el-input
                  v-model="column.component.vModel2" 
                  :placeholder="column.tag === 'dept-position-s' ? '请输入岗位id字段' : '请输入人员id字段'" />
                </el-form-item>
                <el-form-item :label="column.tag === 'dept-position-s' ? '岗位名称字段' : '人员名称字段'">
                  <el-input
                  v-model="column.component.vName2" 
                  :placeholder="column.tag === 'dept-position-s' ? '请输入岗位名称字段' : '请输入人员名称字段'" />
                </el-form-item>
              </template>
              <el-form-item label="占位提示">
                <el-input 
                v-model="column.component.placeholder" 
                placeholder="请输入占位提示" />
              </el-form-item>
              <el-form-item label="是否禁用">
                <el-switch v-model="column.component.disabled" />
              </el-form-item>
              <el-form-item label="是否必填">
                <el-switch v-model="column.component.required" />
              </el-form-item>
              <template v-if="['el-select', 'dept-select', 'dept-position-s', 'dept-user-s'].indexOf(column.tag) >= 0">
                <el-form-item label="是否多选">
                  <el-switch v-model="column.component.multiple" />
                </el-form-item>
              </template>
              <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(column.tag) > -1">
                <template>
                  <el-divider>选项设置</el-divider>
                  <el-form-item label="选项值类型">
                    <el-select v-model="column.component.optionValueType" clearable placeholder="请选择选项值类型">
                      <el-option v-for="(value, key) in valueTypeList" :key="key" :label="value" :value="key" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="选项值数据">
                    <el-input type="textarea" :rows="2" v-model="column.component.optionValueData" placeholder="请输入选项值数据" />
                  </el-form-item>
                  <el-form-item label="关联字段">
                    <el-select v-model="column.component.optionValueDataColumn" clearable multiple collapse-tags placeholder="请选择关联字段">
                      <el-option v-for="item in columns" :key="item.columnId" :label="item.columnName +'：' +item.columnComment" :value="item.columnName" />
                    </el-select>
                  </el-form-item>
                </template>
                <draggable
                  :list="column.component.options"
                  :animation="340"
                  group="optionSelectItem"
                  handle=".option-drag">
                  <div v-for="(item, index) in column.component.options" :key="index" class="select-item">
                    <div class="select-line-icon option-drag">
                      <i class="el-icon-s-operation" />
                    </div>
                    <el-input v-model="item.label" placeholder="选项名" size="small" />
                    <el-input
                      placeholder="选项值"
                      size="small"
                      :value="item.value"
                      @input="setOptionValue(item, $event)"
                    />
                    <div class="close-btn select-line-icon" @click="column.component.options.splice(index, 1)">
                      <i class="el-icon-remove-outline" />
                    </div>
                  </div>
                </draggable>
                <div style="text-align: center;">
                  <el-button
                    style="padding-bottom: 0"
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    @click="addSelectItem"
                  >
                    添加选项
                  </el-button>
                </div>
              </template>
              <!-- <template>
                <el-divider>值类型设置</el-divider>
                <el-form-item label="常用值类型">
                  <el-select v-model="column.component.valueDataType" clearable placeholder="请选择常用值类型" @change="handleChangeValueDataTypeList">
                    <el-option v-for="item in valueDataTypeList" :key="item.id" :label="item.text" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="值类型">
                  <el-select v-model="column.component.valueType" clearable placeholder="请选择值类型">
                    <el-option v-for="(value, key) in valueTypeList" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
                <el-form-item label="值数据">
                  <el-input type="textarea" :rows="2" v-model="column.component.valueData" placeholder="请输入值数据" />
                </el-form-item>
                <el-form-item label="关联字段">
                  <el-select v-model="column.component.valueDataColumn" clearable multiple collapse-tags placeholder="请选择关联字段">
                    <el-option v-for="item in columns" :key="item.columnId" :label="item.columnName +'：' +item.columnComment" :value="item.columnName" />
                  </el-select>
                </el-form-item>
              </template> -->
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { isNumberStr } from '@/views/workflow/utils/generator/index'
import enums from '@/views/workflow/utils/enum'
import {
  inputComponents, selectComponents, sysComponents
} from '@/views/workflow/components/generator/config'
import { getListByTableId as getColumnsByTableId } from '@/api/workflow/form/columns'
export default {
  props: ['tableId', 'column'],
  components: {
    draggable
  },
  data() {
    return {
      columns: []
    }
  },
  computed: {
    valueTypeList() {
      return enums.VALUE_TYPE
    },
    valueDataTypeList() {
      return enums.VALUE_TYPE_DATA
    },
    tabColumnTypeList() {
      return enums.TAB_COLUMN_TTYPE
    }
  },
  watch: {
    tableId(n, o){
      this.getColumns()
    }
  },
  mounted() {
    this.getColumns()
  },
  methods: {
    getColumns() {
      if (!this.tableId) return
      getColumnsByTableId(this.tableId).then(res => {
        this.columns = res.data
      })
    },
    onClose() {},
    handleColumnType(value) { // 切换列的类型
      // if (value === 'component') {
      //   this.column.component = this.column.component || {
      //     tag: '',
      //     placeholder: '',
      //     vModel: '',
      //     clearable: true,
      //     valueType: '',
      //     valueData: '',
      //     valueDataColumn: [],
      //     options: [],
      //     optionValueType: '',
      //     optionValueData: '',
      //     optionValueDataColumn: [],
      //     format: 'yyyy-MM-dd',
      //     'value-format': 'yyyy-MM-dd',
      //   }
      // }
    },
    handleColumnTagChange() { // 切换列的组件类型
      let component = inputComponents.find(item => item.tag === this.column.tag)
      component = component ? component : selectComponents.find(item => item.tag === this.column.tag)
      if (['dept-select', 'dept-position-s', 'dept-user-s'].indexOf(this.column.tag) >= 0){
        component = sysComponents.selectComponents.find(item => item.tag === this.column.tag)
      }
      component.vModel = component.defaultValue || undefined 
      this.column.component = { ...component }
    },
    columnChange(val) { // 切换字段名
      const column = this.columns.find(item => item.columnName === val)
      this.column.label = column.columnComment
    },
    setOptionValue(item, val) { // 设置下拉选项
      item.value = isNumberStr(val) ? +val : val
    },
    addSelectItem() { // 添加下拉选项
      this.column.component.options.push({
        label: '',
        value: ''
      })
    },
    handleChangeValueDataTypeList(val) { // 改变常用值类型
      const item = this.valueDataTypeList.find(item => item.id === val)
      this.column.component.valueType = item ? item.valueType : ''
      this.column.component.valueData = item ? item.valueData : ''
    },
  }
}
</script>

<style lang="scss" scoped>
  
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}
.option-drag {
  cursor: move;
}
</style>
